---
icon: TerminalIcon
---

import { compileMdx } from 'nextra/compile'
import { Tabs } from 'nextra/components'
import { MDXRemote } from 'nextra/mdx-remote'

# Npm2Yarn

Nextra uses
[`@theguild/remark-npm2yarn`](https://npmjs.com/package/@theguild/remark-npm2yarn)
package that replaces the code block that has `npm2yarn` metadata with
[`<Tabs>` and `<Tabs.Tab>` components](/docs/built-ins/tabs) from
`nextra/components`.

The chosen tab is saved in the local storage, which will be chosen in future
page renders.

## Example

<Page />

export async function Page() {
  const codeBlock = `\`\`\`sh npm2yarn
npm i -D @graphql-eslint/eslint-plugin
\`\`\``
  const rawJs = await compileMdx(`${codeBlock}
## Usage
~~~md filename="Markdown" /npm2yarn/
${codeBlock}
~~~`)
  return <MDXRemote compiledSource={rawJs} components={{ $Tabs: Tabs }} />
}
